
<template>
  <div class="box productType">
  
    <!-- //表格头 -->
    <div class="box1">
      <div>
        <li><i class="el-icon-notebook-2"></i> 数据列表</li>
        <el-button plain @click="open">添加</el-button>
      </div>
    </div>

    <!-- //表格 -->
    <div class="box2">
      <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column prop="date" width="50" align="center" type="selection" >
        </el-table-column>

        <el-table-column prop="id" label="编号" width="180" align="center">
        </el-table-column>

        <el-table-column prop="name" label="属性名称" align="center">
        </el-table-column>

        <el-table-column  label="商品类型" align="center"><div>{{uname}}</div>
        </el-table-column>

        <el-table-column prop="selectType" label="属性是否可选" align="center"  :formatter="ifendcase"> 
        </el-table-column>

        <el-table-column  prop="inputType"  label="属性值的录入方式" align="center"  :formatter="ifendcases" >
        </el-table-column>

        <el-table-column prop="inputList" label="可选值列表" align="center">
        </el-table-column>

        <el-table-column prop="sort" label="排序" align="center">
        </el-table-column>

        <el-table-column label="操作" align="center" id="change" width="300">
          <template slot-scope="scope">
            <el-button plain @click="handleEdit3(scope.row)">编辑</el-button>

           <el-button type="danger" @click="opens( scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <div class="box3">

        <div>
                  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    
            <el-form-item label="">
              <el-select v-model="region" placeholder="批量操作">
                <el-option label="删除" value="1"></el-option>
                <el-option label="待定" value="2"></el-option>
            
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form-item>
          </el-form>
        </div>

   
        <div>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                    :page-sizes="[5, 10, 15]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total= page
              >
              </el-pagination>
            </div>
        </div>

    
          
       
       
    
  </div>
</template>



<script>


//选取方式





//添加按钮
export default {
  name: "Shuxing",
  mounted() {





    let that = this;
    that.uname =  this.$route.params.names
     that.type = this.$route.params.type;
     that.productAttributeCategoryId= this.$route.params.productAttributeCategoryId;
     that.num = this.$route.params.num
that.tiao =this.$route.params.tiao
   
    this.$axios
      .get("productAttribute/list/"+this.$route.params.num, {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type:0,
        },
      })
      .then(function (response) {
    
        that.tableData = response.data.data.list;
         that.page = response.data.data.total,

          that.selectType=response.data.data.list.selectType
         that.inputType=response.data.data.list.inputType
    
          
 
      })
      .catch(function (error) {});
  },

  data() {
    return {
      tiao:"",
      region:"",
      text:'',
      selecType:"",
      inputType:"",
        num:'',
       merchantSelectedIds:[],

      tableData: [
         
      
      ],  formInline: {
          user: '',
          region: ''
        },
      currentPage4: 0,
      currentPage: 0,
      name: "",
      pageNum: 1,
      pageSize: 5,
      index: "",
      namese:"qwe123",
      uname:"",
         page:1,
         type:5,
         productAttributeCategoryId:""
    };
  },

  methods: {

ifendcase(val){

    if(val.selectType==0){
      return "唯一"
    }
    else if(val.selectType ==1){
      return '单选'
    }
    else {
      return "多选"
    }

  },

  ifendcases(val){

    if(val.selectType==1){
      return "从列表中选取"
    }

    else {
      return "手工录入"
    }
 
  },


      
    fn() {
      let that = this;
      this.$axios
        .get("productAttribute/list/"+this.$route.params.num , {
          params: {
         pageNum: this.pageNum,
            pageSize: this.pageSize,
               type:0,

          },
        })
        .then(function (response) {
          that.tableData = response.data.data.list;
           that.page = response.data.data.total
             
        })
        .catch(function (error) {});
    },
//添加
    open() {
     
       this.$router.push({
          name:"Tianjia",
          params:{
    
         shangpin:this.uname,
          type:this.type,
          productAttributeCategoryId:this.productAttributeCategoryId,
        uname:this.uname,
          tiao:this.tiao,


       }
      });
    },


//分页
    handleSizeChange(val) {
     this.pageSize = `${val}`,
     this.fn();
    },
    handleCurrentChange(val) {
       this.pageNum = `${val}`;
      this.fn();
    },







  ifendcase(val){
    
    if(val.selectType==0){
      return "唯一"
    }
    else if(val.selectType ==1){
      return '单选'
    }
    else {
      return "多选"
    }

  },

  ifendcases(val){

    if(val.selectType==1){
      return "从列表中选取"
    }

    else {
      return "手工录入"
    }
 
  },




//批量删除
//获取id
handleSelectionChange(value){

this.merchantSelectedIds = value
},



//再删除
onSubmit(){

  

  let that =this
  let ps = [];
if( ps != "" || this.region ==1 ){
 this.merchantSelectedIds.forEach(element => {
      ps.push(element.id)    
    })



 if(ps!= ""){
                      
    if(this.region == 1){

                                        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                                                  confirmButtonText: '确定',
                                                  cancelButtonText: '取消',
                                                  type: 'warning'
                                                }).then(() => {
                                                  this.$message({
                                                    type: 'success',
                                                    message: '删除成功!'
                                                  });

                                        this.$axios.post('/productAttribute/delete?ids='+ps).then(function (response){
                                              that.fn()
                                            })         
                                                }).catch(() => {
                                                  this.$message({
                                                    type: 'info',
                                                    message: '已取消删除'
                                                  });          
                                                });
                                          
                                        }
                                        else{
                                          this.$message({
                                                  message: '请选择操作内容',
                                                  type: 'warning'
                                                });
                                        }
  }else{
                              this.$message({
                                    message: '请选择一条数据',
                                    type: 'warning'
                                  });
  }
  
  
  
}



  
else{ 
  // console.log(123);
  
 this.$message({
          message: '您未进行选项操作',
          type: 'warning'
        });     



}

    },
  







//删除
      opens(index, row) {
            let that = this

              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                that.$axios.post('/productAttribute/delete?ids='+index.id,{
                          
                }),
             
                that.fn()
                this.$message({       
                  type: 'success',
                  message: '删除成功!'
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
              });
            },

    // 编辑
    handleEdit3(index, row) {
      // console.log(index, row);
      // console.log(index.id);
      // console.log(index.name);
      // console.log(index.inputList);


      this.num = index.id;
      // console.log(index);

      this.$router.push({
        name:"Bianji",
       params:{
         sort: index.sort,
         inputList:index.inputList,
         shuxing:index.name,
         shangpin:this.uname,
         id:index.id,
         selectType:index.selectType,
         inputType:index.inputType,
          tiao:this.$route.params.tiao
        
         

       }
      });
    },
  },
};
</script>




<style scoped>
li {
  list-style: none;
}
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 2.125rem;
}
.box1 {
  font-size: 1.5625rem;
  line-height: 2.125rem;
  width: 80%;
  height: 4.725rem;
  border: 1px solid #ebeef5;
  border-radius:.125rem;
  margin-bottom: 2.1875rem;
  margin-top: 1.25rem;
}
.box1 div {
  widows: 80%;
  padding: 1.25rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.box2 {
  width: 80%;
}
#change {
  display: flex;
  flex-wrap: nowrap;
}

.box3 {
  margin-top: 1.875rem;
  width: 80%;
  display: flex;
  justify-content: space-between;
}


.el-dropdown {
    vertical-align:bottom;
  }
  .el-dropdown + .el-dropdown {
    margin-left: .9375rem;
  }
  .el-icon-arrow-down {
    font-size: .75rem;
  }


a {
  list-style: none;
  text-decoration: none;
  color: black;
}
</style>